<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 拍卖场次信息</el-breadcrumb-item>
                <el-breadcrumb-item>基本信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box">
            <el-row>
                <el-col :span="5">
                  <div class="grid-content bg-purple meebidImageContainer">
                    <img :src="scene.logo" />
                  </div>
                </el-col>
                <el-col :span="4"><div class="grid-content bg-purple">名称：</div></el-col>
                <el-col :span="9"><div class="grid-content bg-purple-light">{{scene.name}}</div></el-col>
            </el-row>
            <el-row>
              <el-col><div class="grid-content bg-purple-light">{{scene.description}}</div></el-col>
            </el-row>
            <el-row>
                <el-row>
                    <el-col :span="4"><div class="grid-content bg-purple">起始：</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple-light">{{dateFormatter(scene.startAt)}}</div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple">结束：</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple-light">{{dateFormatter(scene.endAt)}}</div></el-col>
                </el-row>
                 <el-row>
                    <el-col :span="4"><div class="grid-content bg-purple">展出：</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple-light">{{dateFormatter(scene.exhTime)}}</div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple">类型：</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple-light">{{typeFormatter(scene.type)}}</div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="4"><div class="grid-content bg-purple">创建者：</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple-light">{{scene.creatorName}}</div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple">状态：</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple-light">{{stateFormatter(scene.state)}}</div></el-col>
                </el-row>
            </el-row>
        </div>

        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 拍卖场次信息</el-breadcrumb-item>
                <el-breadcrumb-item>地址信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <el-table
              :data="addresses"
              border
              style="width: 100%">
              <el-table-column
                label="Type" prop="type" :formatter="addrTypeFormatter"
                width="140">
              </el-table-column>
              <el-table-column
                label="Country/City/District"
                width="300">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{getRegionLabel(scope.row.regions)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="Address"
                >
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{getRegionDetail(scope.row.detail)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="Time"
                :formatter="dateFormatter"
                >
                <template scope="scope">
                  {{dateFormatter(scope.row.startAt)}} ~ {{dateFormatter(scope.row.endAt)}}
                </template>
              </el-table-column>
            </el-table>
        </div>

        <el-row :gutter="20">
          <el-col :span="12">
            <p><i>注意：同意发布前，请先确认提交审核的拍品信息无误！</i></p>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="isAudit">
            <el-col :span="12" :offset="6">
                <el-button class="marginTopSmall" type="primary" @click="handleStateChange(4)">同 意</el-button>
                <el-button class="marginTopSmall" type="danger" @click="handleStateChange(1)">拒 绝</el-button>
            </el-col>
        </el-row>
    </div>
</template>


<script>
import dateUtils from "./../../utils/date";
import meebidUtils from "../../utils/meebidUtils";
export default {
  props: {
    scene: {},
    isAudit: false
  },
  data() {
    return {
      addresses: []
    };
  },
  mounted() {
    console.log(this.scene);
    if (this.scene == undefined) {
      return;
    }
    const self = this;
    self.$http
      .get("api/mgr/scene/addresses?sceneId=" + self.scene.id)
      .then(res => {
        if (res.data.code != 1) {
          self.$message.error(res.data.msg);
          return;
        }

        for (var i = 0; i < res.data.content.addresses.length; i++) {
          if (res.data.content.addresses[i] != null) {
            self.addresses.push(res.data.content.addresses[i]);
          }
        }
      });
  },
  methods: {
    handleStateChange(houseState) {
      console.log(this.scene);
      const self = this;
      if (houseState == 4 && (this.scene.state & 2) == 0) {
        self.$http
          .post(
            "api/mgr/lot/audit",
            JSON.stringify({
              sceneId: self.scene.id,
              oldState: 2,
              state: houseState == 4 ? 8 : 1
            })
          )
          .then(res => {
            if (res.data.code != 1) {
              self.$message.error(res.data.msg);
              return;
            }
            self.isAudit = false;
          });
      } else {
        self.$http
          .post(
            "api/mgr/scene/audit",
            JSON.stringify({ sceneId: self.scene.id, state: houseState })
          )
          .then(res => {
            if (res.data.code != 1) {
              self.$message.error("Already Approved.");
              return;
            }
            self.$message.info("Approved.");
            self.isAudit = false;
          });
      }
    },
    addrTypeFormatter(row, column) {
      var ex = "";
      var tp = row.type;
      if (row.type % 2 == 1) {
        ex = "(默认)";
        tp -= 1;
      }
      switch (tp) {
        case 2:
          return "联系人地址" + ex;
        case 4:
          return "物理地址" + ex;
        case 8:
          return "账单地址" + ex;
        case 16:
          return "收货地址" + ex;
        case 32:
          return "展览地址" + ex;
        case 64:
          return "拍卖地址" + ex;
        case 128:
          return "取货地址" + ex;
      }
      return "未知";
    },
    getRegionLabel(regions) {
      var regionLabel = "";
      for (var i = 0; i < regions.length; i++) {
        if (i !== regions.length - 1) {
          regionLabel += regions[i].label + "/";
        } else {
          regionLabel += regions[i].label;
        }
      }
      return regionLabel;
    },
    getRegionDetail(detail){
      var detailLabel = "";
      var detailList = detail && detail.length ? detail : [];
      for (var i = 0; i < detailList.length; i++){
        if (detailList[i].controlType === 'select') {
          var detailOption = meebidUtils.findObject(detailList[i].options, "id", detailList[i].value);
          if (detailOption) {
            detailLabel += detailOption.label ? detailOption.label + " " : detailOption.name + " ";
          } else {
            console.log("Incorrect address get: " + detailList[i].field);
          }          
        } else {
          detailLabel += detailList[i].value ? detailList[i].value + " " : "";
        }
      }
      return detailLabel;
    },
    typeFormatter(type) {
      switch (type) {
        case 0:
          return "Timed";
        case 1:
          return "Live";
        case 2:
          return "CategoryOnly";
        default:
          break;
      }
      return "未知";
    },
    dateFormatter(date) {
      return date ? dateUtils.format(new Date(date), "MM/dd/yyyy hh:mm A") : "";
    },
    stateFormatter(state) {
      switch (state) {
        case 0:
          return "已删除";
        case 1:
          return "新创建";
        case 2:
        case 3:
          return "待审核";
        case 4:
          return "已过审";
        case 8:
          return "被管理员下架";
        case 16:
          return "预览中";
        case 18:
          return "预览中&待审核";
        case 32:
          return "上架中";
        case 64:
          return "已结束";
        default:
          break;
      }
      return "未知";
    }
  }
};
</script>

<style>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding-left: 10px;
  vertical-align: middle;
  line-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.marginTopSmall {
  margin-top: 10px;
}
.meebidImageContainer img {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  vertical-align: middle;
}
.meebidImageContainer {
  width: 100px;
  height: 100px;
  border: none;
  position: relative;
  display: inline-block;
  margin: 0px;
  padding: 0;
  vertical-align: top;
  text-decoration: none;
  outline: none;
}
</style>
